@if (viewState$ | async; as state) {
  <mat-sidenav-container class="app-shell-container">
    <mat-sidenav
      #drawer
      class="app-shell-sidenav"
      fixedInViewport
      [attr.role]="state.isHandset ? 'dialog' : 'navigation'"
      [mode]="state.isHandset ? 'over' : 'side'"
      [opened]="state.isHandset === false"
    >
      <mat-toolbar color="primary">
        <ng-content select="[rxaAppShellSidenavTitle]"></ng-content>
      </mat-toolbar>
      <ng-content select="rxa-side-nav"></ng-content>
    </mat-sidenav>
    <mat-sidenav-content class="app-shell-content">
      <mat-toolbar class="app-shell-header" color="primary">
        @if (state.isHandset && !state.showBackButton) {
          <button
            type="button"
            aria-label="Toggle sidenav"
            mat-icon-button
            (click)="drawer.toggle()"
          >
            <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
          </button>
        }
        @if (state.showBackButton) {
          <button
            type="button"
            aria-label="Toggle sidenav"
            mat-icon-button
            (click)="onBackButtonClick.next($event)"
          >
            <mat-icon aria-label="navigate back">keyboard_backspace</mat-icon>
          </button>
        }
        <ng-content select="[rxaAppShellHeaderContent]"></ng-content>
      </mat-toolbar>
      <div class="container-fluid app-shell-content-container" cdkScrollable>
        <ng-content></ng-content>
      </div>
    </mat-sidenav-content>
  </mat-sidenav-container>
}
